<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/vue.global.js"></script>
</head>

<style>
.class1{
  background: #444;
  color: #eee;
}
</style>

<body>

<span v-once id='HelloVue'>这个将不会改变: {{ message }}</span>
<script type="text/javascript">
    const HelloVue={
        data(){
            return{
                message:'Hello Java!!'
            }
        }
    }
    Vue.createApp(HelloVue).mount('#HelloVue');
</script>
<br>
<br>
<div id="example1">
    <p>使用双大括号的文本插值: {{ rawHtml }}</p>
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>

<script type="text/javascript">
    const RenderHtmlApp = {
    data(){
        return{
            rawHtml:'<span style="color: blue">这里会显示蓝色！</span>'
            }
        }
    }
    Vue.createApp(RenderHtmlApp).mount('#example1')
</script>

<br>
<br>
<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br>
  <br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
<script>
    const app = {
      data() {
        return {
          use: false
        }
      }
    }
    Vue.createApp(app).mount('#app')
</script>
<br>
<br>

<div id="app2">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
    const app2 = {
      data() {
        return {
          ok: true,
          message: 'RUNOOB!!',
          id: 1
        }
      }
    }
    Vue.createApp(app2).mount('#app2')
</script>
</body>
</html>